<!--  -->
<template>
  <div class="iobt">
    <ul class="yous">
      <li
        v-for="(cars, index) in cards"
        :key="index"
        @click="changeView(index)"
        :class="{ clo: currentIndex === index }"
      >
        {{ cars }}
        <span :class="{ active: currentIndex === index }"></span>
      </li>
    </ul>
    <div class="lei">
      <component :is="currentTabComponent"></component>
    </div>
  </div>
</template>

<script>
import Sou from '@/components/admin/card/index.vue'
import Tong from '@/components/admin/card/Tong.vue'
export default {
  name: 'Navs',
  components: {
    Sou,
    Tong,
  },
  data() {
    return {
      currentIndex: 0,
      cards: ['名片管理', '名片统计'],
      arr: ['Sou', 'Tong'],
    }
  },
  created() {},
  methods: {
    changeView(index) {
      this.currentIndex = index
      this.isFinshed = true
    },
  },
  computed: {
    currentTabComponent() {
      return this.arr[this.currentIndex]
    },
  },
}
</script>

<style lang='scss' scoped>
*{
  margin: 0;
  padding: 0;
}
.iobt {
  width: 100%;
  height: auto;
  margin: 0;
  .yous {
    background: #fff;
    line-height: 66px;
    width: 100%;
    height: 66px;
    list-style: none;
    display: flex;
    align-items: center;
    li {
      width: 64px;
      height: 24px;
      margin: 0 25px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      line-height: 24px;
      .active {
        display: block;
        width: 41px;
        height: 3px;
        border-radius: 2px 2px;
        background: #005fff;
        position: relative;
        top: 19px;
        left: 11px;
      }
    }
    .clo {
      color: #005fff;
    }
  }
  .lei {
    width: 100%;
    height: 874px;
    background: #f0f2f5;
    margin-top: 20px;
  }
}
</style>
